<template>
    <div class="main organization-list">
        <div v-if="rightsButtons['add']" class="tool-bar">
            <el-button type="success" icon="el-icon-plus" class="fr" @click="showAdd">新建组织机构</el-button>
        </div>
        <tree-table :data="list" :columns="columns" :evalArgs="args" v-loading="listLoading" :expandAll="true" border>
            <!--<el-table-column align="center" label="父编号" prop="pid" width="120">
            </el-table-column>
            <el-table-column align="center" label="父编号列表" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.obj.parentIds}}</span>
                </template>
            </el-table-column>-->
            <el-table-column align="center" label="排序" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.obj.priority}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="260" v-if="rightsButtons['edit'] || rightsButtons['delete']">
                <template slot-scope="scope">
                    <!--<el-button type="success" size="mini" plain @click="showAdd(scope.row)">新建子级</el-button>-->
                    <el-button v-if="rightsButtons['edit']" type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
                    <el-button v-if="rightsButtons['delete'] && scope.row.id!==1" type="danger" size="mini" plain @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </tree-table>
        <el-dialog :title="formData.id ? '编辑组织机构' : '新建组织机构'" :visible.sync="showEditPop">
            <el-form :model="formData" :rules="formRules" size="medium" ref="form" label-width="120px">
                <el-form-item label="组织机构名称:" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <!--<el-form-item label="父级编号:">
                    <span v-text="formData.parentId"></span>
                </el-form-item>
                <el-form-item label="父级编号列表:">
                    <span v-text="formData.parentIds"></span>
                </el-form-item>-->
                <el-form-item label="排序:" prop="priority">
                    <el-input type="number" v-model="formData.priority"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
                <el-button @click="showEditPop = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import treeTable from '@/components/TreeTable'
    export default {
        name: 'userOrganizationList',
        components: {
            treeTable
        },
        data(){
            return{
                columns: [{
                    text: '名称',
                    value: 'name'
                }],
                args: [null, null, 'name'],
                listLoading: false,
                listQuery: {},
                list: [],
                showEditPop: false,
                btnLoading: false,
                formData: {},
                formRules: {}
            }
        },
        created(){
            this.getList();
        },
        methods: {
            getList(){
                this.listLoading = true;
                this.request({
                    url: '/bsnl-authority/organization/tree',
                    method: 'get',
                    params: this.listQuery
                }).then(({data}) => {
                    this.list = data;
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listLoading = false;
                });
            },
            showAdd(row){
                if(row && row.id){
                    this.formData = {
                        name: '',
                        parentId: row.id,
                        parentIds: row.obj.parentIds+row.id+'/',
                        priority: ''
                    }
                }
                else{
                    this.formData = {
                        name: '',
                        parentId: 0,
                        parentIds: '0/',
                        priority: ''
                    }
                }
                this.showEditPop = true;
            },
            showEdit(row){
                this.formData = {
                    id: row.id,
                    name: row.name,
                    parentId: row.pid,
                    parentIds: row.obj.parentIds,
                    priority: row.obj.priority
                };
                this.showEditPop = true;
            },
            del(row){
                this.$confirm(`确定要删除 ${row.name} ${row.children && row.children.length > 0 ? '及其子级' : ''}吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.request({
                        url: '/bsnl-authority/organization/delete',
                        method: 'post',
                        data: {
                            id: row.id,
                            deleteFlag: 0
                        }
                    }).then(() => {
                        this.$message.success('删除成功');
                        this.getList();
                    });
                }).catch(err => {
                    console.log(err);
                });
            },
            save(){
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let url = this.formData.id ? '/bsnl-authority/organization/update' : '/bsnl-authority/organization/create';
                    this.btnLoading = true;
                    this.request({
                        url,
                        method: 'post',
                        data: this.formData
                    }).then(() => {
                        this.btnLoading = false;
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        console.log(err);
                        this.btnLoading = false;
                    });
                });
            }
        }
    }
</script>
